<template>
	<view class="page-subscribeWxMessage" :style="themeColor">
		<!-- header -->
		<cu-custom bgColor="bgmain" :isBack="true">
			<view slot="content">温馨提示</view>
		</cu-custom>

		<view class="page-subscribeWxMessag__header">
			<!-- <view class="page-subscribeWxMessage__rules-title">温馨提示：</view> -->
			<view class="page-subscribeWxMessage__rules">
				<view class="page-subscribeWxMessage__rules__item">1、为了您及时接收本程序的消息，请进行手动订阅操作。</view>
				<!-- <view class="page-subscribeWxMessage__rules__item">2、订阅后面数字代表可发送次数，点击一次增加一次。</view> -->
				<view class="page-subscribeWxMessage__rules__item">2、请选择“总是保存以上选择，不再询问”。</view>
			</view>
		</view>
		<!-- header end -->
		<!-- content -->
		<view class="page-subscribeWxMessag__content">
			<!-- 订阅消息列表卡片 -->
			<view  class="page-subscribeWxMessag-card">
				<view class="page-subscribeWxMessag-card__title">
					<!-- {{item.title}} -->
					消息订阅
				</view>
				<!-- 消息列表 -->
				<view class="page-subscribeWxMessag-card__list">
					<view v-for="(item,index) in temps" :key="index" class="page-subscribeWxMessag-card__item" v-if="item.temp_id.length>10">
						<view class="page-subscribeWxMessag-card__item__title">{{index+1}}、{{item.name}}</view>
						
						<view class="page-subscribeWxMessag-card__item__btn" @click="handleBtnSubscribe(item)">订阅
							{{ item.number > 0 ? ("+"+item.number) :""}}
							
						</view>
					</view>
				</view>
				<!-- 消息列表 end -->
			</view>
			<!-- 订阅消息列表卡片 -->
		</view>
		<!-- content end -->
	
		<!-- 联系客服弹窗 -->
		<popup-view :show="servicePopupVisible && cServicePopupCanShow">
			<block v-if="servicePopupVisible">
				<view class="shade-box">
					<view class="invite-bg m-btm40" :style="{'background-image':getImageRoot('45.png','url')}">
						<view class="invite-textbox p-r">
							<view class="invite-title f-44 col-3 t-c m-btm40">添加客服</view>
							<view class="commun-detail" style="margin-top: 80rpx;">
								<block v-if="!!serviceRes['kf_phone']">
									<view class="commun-bg-style bor-radius-10upx b-f commun-bg-style-top dis-flex flex-y-center flex-x-between p-left-right-30">
										<view class="commun-left dis-flex flex-y-center">
											<image src="/static/images/merchant/mobile.png" mode="" class="commun-mobile"></image>
											<view class="col-3 f-24">{{serviceRes['kf_phone']}}</view>
										</view>
										<view class="commun-right commun-right-mobile f-24 col-3 t-c main-bg-color auxiliary-color" @click="commun('mobile',serviceRes['kf_phone'])">拨号</view>
									</view>
								</block>
								<block v-if="!!serviceRes['kf_wxid']">
									<view class="commun-bg-style bor-radius-10upx b-f dis-flex flex-y-center flex-x-between p-left-right-30">
										<view class="commun-left dis-flex">
											<image src="/static/images/merchant/wx.png" mode="" class="commun-weixin"></image>
											<view class="col-3 f-24">{{serviceRes['kf_wxid']}}</view>
										</view>
										<view class="commun-right commun-right-copy f-24 col-f t-c" @click="commun('wx',serviceRes['kf_wxid'])">复制</view>
									</view>
								</block>
							</view>
						</view>.
					</view>
					<view class="shade-close t-c">
						<text class="iconfont icon-roundclose shade-close-icon" @click="servicePopupVisible = false"></text>
					</view>
				</view>
			</block>
		</popup-view>
		<!-- 联系客服弹窗 end -->
	</view>
</template>

<script>
	// import App from "@/common/js/app.js";
	// import PopupView from "@/components/template/PopManager.vue"
	// import {
	// 	wxRequestSubscribeMessageX
	// } from '@/common/js/wxPromise.js'
	const isDingYue=true
	var app = getApp();
	export default {
		components: {
			// PopupView
		},
		data() {
			return {
				themeColor:"--theme-color:#ff6344;--help-color:#FF4444; --auxiliary-color:#fff;",
				// 全局配置的接口数据
				settingRes: {},
				// 订阅消息列表的接口数据
				listRes: [],
				// 客服信息的接口数据
				serviceRes: {},
				// 联系客服弹窗是否显示
				servicePopupVisible: false,
				temps:[]
			}

		},
		computed: {
			// 格式化的订阅消息列表
			cData() {
				return (this.listRes || []).map(item => ({
					title: item.title,
					data: (item.data || []).map(listItem => {
						// 处理要显示的订阅数
						let numberStr = listItem.number || 0
						numberStr = numberStr > 999 ? 999 : numberStr
						numberStr = numberStr > 0 ? '+' + numberStr : ''
						return {
							...listItem,
							// 不超过999
							numberStr
						}
					})
				}))
			},
			// 客户信息是否可以显示
			// cServicePopupCanShow() {
			// 	return +this.$util.deepGet(this.settingRes, 'apply_open') === 1
			// }
		},
		async mounted() {
			// await this.fetchSettingRes()
			// this.fetchListRes()
			// this.fetchServiceRes()

			this.initTemps()
		},
		methods: {
			initTemps(){
				var sys = uni.getStorageSync('sys')
				this.temps=[
					{
						name: "骑手订阅消息",
						temp_id: sys.template_new,
						number:0
					},
					{
						name: "用户抢单提醒",
						temp_id: sys.template_grab,
						number: 0
					},
					{
						name: "取消订单消息提醒",
						temp_id: sys.template_cancel,
						number: 0
					},
					{
						name: "商家订阅消息",
						temp_id: sys.template_store,
						number: 0
					},
					{
						name: "圈子留言订阅消息",
						temp_id: sys.template_comment,
						number: 0
					},
					{
						name: "二手市场支付订阅消息",
						temp_id: sys.template_pay,
						number: 0
					},
					{
						name: "消息提醒",
						temp_id: sys.template_notice,
						number: 0
					},
					
					// {
					// 	name: "订单取消通知(商家)",
					// 	temp_id: sys.template_cancel,
					// 	number: 0
					// },
					{
						name: "订单取消通知(骑手)",
						temp_id: sys.template_cancel_rider,
						number: 0
					},
					{
						name: "商家拒单提醒",
						temp_id: sys.template_refuse,
						number: 0
					},
					{
						name: "课程提醒",
						temp_id: sys.schedule_template,
						number: 0
					},
					{
						name: "收货提醒",
						temp_id: sys.completenews,
						number: 0
					},
					{
						name: "订单送达成功通知",
						temp_id: sys.template_arrive,
						number: 0
					},
					{
						name: "取餐提醒",
						temp_id: sys.template_complete,
						number: 0
					},
				]
				if (isDingYue) {
					this.getTempList()
				}
			},
			getTempList(){
				app.globalData.util.request({
					url: 'WechatUser/subscribeList',
					data: {
						
					},
					success:(res)=> {
						// console.log(res);
						console.log(this.temps);
						this.temps=this.temps.map(item=>{
							let numItem = res.data.data.filter(i => i.temp_id == item.temp_id)[0] || { count: 0 }
							console.log(numItem);
							

							return {
								...item,
								number: numItem.count
							}
						})
						console.log(this.temps);
					}
				}, true);
			},
			add(temp_id=""){
				app.globalData.util.request({
					url: 'WechatUser/addSubscribe',
					data: {
						temp_id
					},
					success:(res)=> {
						this.getTempList()
					}
				}, true);
			},
			// 抄过来的方法
			commun(type, val) {
				let _this = this;
				switch (type) {
					case 'mobile':
						uni.makePhoneCall({
							phoneNumber: val //仅为示例
						});
						break;
					case 'wx':
						App.copyTextHandle(val);
						break;
				}
			},
			/**
			 * 订阅按钮点击事件
			 */
			async handleBtnSubscribe(item={}) {

				console.log(13,item);
				if(this.beingSubscribe) {
					return
				}
				// this.beingSubscribe = true
				if (item.number >= 999) {
					uni.showToast({
						icon: 'none',
						title: '已到达该消息最大订阅数'
					})
					this.beingSubscribe = false
					return 
				}
				
				try {
				     console.log(13,item.temp_id);
					const tmplIds = [
						// "12133333333333333333"
						item.temp_id
					]
					wx.requestSubscribeMessage({
						tmplIds,
						success: (res) => {
							console.log("res", res);
							// 允许
							if (res[tmplIds[0]] == "accept") {
								uni.showToast({
									icon: 'none',
									title: '订阅成功'
								})
								if (isDingYue) {
									this.add(item.temp_id)
								}
							}
							// 拒绝
							if (res[tmplIds[0]] == "reject") {
								uni.showToast({
									icon: 'none',
									title: '订阅失败'
								})
							}
							
						},
						fail: (err) => {
							console.log("err", err);
							const errObj={
								10001: "模板Id不存在，请检测配置",
								10002: "网络问题，请求消息列表失败",
								10003: "网络问题，订阅请求发送失败",
								10004: "模板Id配置有误",
								20001: "没有模板数据",
								20003: "模板消息数量超过上限",
								20004: "用户关闭了主开关，无法进行订阅",
								20005: "小程序被禁封",
								20013: "不允许通过该接口订阅设备消息"
							}

							uni.showToast({
								icon: 'none',
								title: errObj[err.errCode]
							})
						}
					})
				} catch (e) {
					uni.hideLoading()
					uni.showToast({
						icon: 'none',
						title: '取消订阅或订阅失败，请稍后再试'
					})
				
					//TODO handle the exception
				}
				console.log('handleBtnSubscribe', item)
				this.beingSubscribe = false
			},
			/**
			 *  导航按钮的点击事件
			 */
			handleNavItemClick({
				url = ''
			}) {
				App.navigationTo({
					url
				});
			},
		
		}
	}
</script>

<style lang="scss" >
	.bgmain {
		background-color: #ff6444 !important;
		/* background: #000 */
		color: white !important;
	}
	.page-subscribeWxMessage {
		background-color: #F8F8F8;
		padding-bottom: 220rpx;
	}

	// header
	.page-subscribeWxMessag__header {
		background-color: var(--theme-color);
		color: var(--auxiliary-color);
		padding-top: 30rpx;
		padding-bottom: 26rpx;
	}

	.page-subscribeWxMessage__rules {
		box-sizing: border-box;
		padding: 0 30rpx;
		padding-top: 17rpx;
	}

	.page-subscribeWxMessage__rules-title {
		font-size: 32rpx;
		text-align: center;
	}

	.page-subscribeWxMessage__rules__item {
		font-size: 26rpx;
		line-height: 1.6;
	}

	// header end

	// content
	.page-subscribeWxMessag__content {
		padding: 0 30rpx;
		background-image: linear-gradient(to right, var(--theme-color), var(--theme-color));
		background-repeat: no-repeat;
		background-size: 100% 116rpx;
	}

	.page-subscribeWxMessag-card {
		color: #333;
		background-color: #fff;
		border-radius: 10rpx;

		&+& {
			margin-top: 20rpx;
		}
	}

	.page-subscribeWxMessag-card__title {
		box-sizing: border-box;
		height: 90rpx;
		padding: 0 30rpx;
		line-height: 90rpx;
		font-weight: bold;
		border-bottom: 1px solid #EEEEEE;
	}

	.page-subscribeWxMessag-card__list {
		padding: 0 30rpx;
	}

	.page-subscribeWxMessag-card__item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 0;
		font-size: 28rpx;
		border-bottom: 1px solid #EEEEEE;
	}

	.page-subscribeWxMessag-card__item__title {
		box-sizing: border-box;
		padding-right: 16rpx;
	}

	.page-subscribeWxMessag-card__item__btn {
		flex-shrink: 0;
		box-sizing: border-box;
		width: 128rpx;
		height: 50rpx;
		line-height: 50rpx;
		background-color: var(--theme-color);
		color: var(--auxiliary-color);
		font-size: 24rpx;
		text-align: center;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	// content end

	// 悬浮导航
	.page-subscribeWxMessage-nav {
		display: flex;
		align-items: center;
		position: fixed;
		left: 30rpx;
		bottom: 40rpx;
	}

	.page-subscribeWxMessage-nav__item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100rpx;
		height: 100rpx;
		background-color: var(--theme-color);
		color: var(--auxiliary-color,#333);
		border-radius: 100%;

		&+& {
			margin-left: 30rpx;
		}
	}

	.page-subscribeWxMessage-nav__img {
		height: 40rpx;
		width: 40rpx;
	}

	.page-subscribeWxMessage-nav__text {
		font-size: 24rpx;
	}

	// 悬浮导航 end
	// 客服弹窗的样式
	.shade-box {
		margin-top: -200upx;
	}

	.invite-bg {
		width: 550upx;
		height: 670upx;
		background-size: 540upx 670upx;
		background-repeat: no-repeat;
	}

	.invite-textbox {
		top: 260upx;
	}

	.invite-text {
		padding: 0 35upx 0 65upx;
	}

	.commun-bg-style {
		width: 428upx;
		height: 80upx;
		margin: 0 auto;
	}

	.commun-bg-style-top {
		margin: 0 auto 20upx !important;
	}

	.commun-left .commun-mobile {
		width: 28upx;
		height: 28upx;
		margin-right: 14upx;
	}

	.commun-left .commun-weixin {
		width: 32upx;
		height: 28upx;
		margin-right: 14upx;
	}

	.commun-right {
		width: 96upx;
		height: 44upx;
		line-height: 44upx;
		border-radius: 6upx;
	}

	.commun-right.commun-right-mobile {
		background-color: #FFD940;
	}

	.commun-right.commun-right-copy {
		background-color: #10CE50;
	}

	.shade-close-icon {
		font-size: 44upx !important;
		color: #FFFFFF !important;
	}

	// 客服弹窗的样式
</style>
